<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <my-nav></my-nav>
        <hello-world></hello-world>
    </div>
</body>
<template id="nav">
    <div>
        <ul>
            <li v-for="(item,idx) in list" :key="idx">{{item}}</li>
        </ul>
    </div>
</template>
<script src="../libs/vue.min.js"></script>
<script>
    // 全局组件
    // 在template选项后，直接书写组件结构
    Vue.component("hello-world", {
        template: `<div>
                    <h2>{{title}}</h2>
                    <p>按钮:<button @click="change">按钮</button></p>
                </div>`,
        data(){
            return {
                title:"这是一个全局组件"
            }
        },
        methods: {
            change(){
                this.title = "hello-world"
            }
        }
    })

    // 在template选项后，引入提前定义好的组件结构
    Vue.component("my-nav", {
        template: `#nav`,
        data(){
            return {
                list:["张三","李四","王二"]
            }
        }
    })

    new Vue({
        el:"#app",
        data(){
            return{
                title:"这是根组件"
            }
        }
    })
</script>
</html>